<style>
    .layui-input {
        height: 2.5rem;
        max-height: 40px;
    }

    .layui-input-block {
        margin-left: 0px;
        min-height: 1.5rem;
        max-height: 40px;
    }

    .layui-btn {
        display: inline-block;
        height: 30px;
        line-height: 30px;
        padding: 0 20px;
        background-color: #009688;
        color: #fff;
        white-space: nowrap;
        text-align: center;
        font-size: 14px;
        border: none;
        border-radius: 2px;
        cursor: pointer;
    }

    .layui-input:focus,
    .layui-textarea:focus {
        border-color: #007457 !important
    }

    .layui-layer-btn .layui-layer-btn0 {
        border-color: #009688 !important;
        background-color: #009688 !important;
        color: #fff;
    }
</style>
<style type="text/css" media="screen">
    .weui-cells__title {
        color: #000;
        font-size: 17px;
    }

    .weui-cell::before {
        border-top: none;
    }

    .weui-cells::before {
        border-top: none;
    }

    .weui-cells::after {
        border-bottom: none;
    }

    .my-weui-cell {
        /* border-top: 1px solid #e5e5e5; */
        border-bottom: 1px solid #e5e5e5;
    }

    .page__hd {
        /* padding: 0px; */
        padding: 0px 5px;
        padding-top: 10px;
        /* border: 1px solid #000; */
    }

    .page__title {
        margin-top: 5px;
        font-size: 20px;
        color: #333;
        text-align: center;
    }

    @media (min-width:0px) {
        html {
            font-size: 12px;
        }
    }

    @media (min-width: 320px) {
        html {
            font-size: 12px;
        }
    }

    @media (min-width: 340px) {
        html {
            font-size: 13px;
        }
    }

    @media (min-width: 360px) {
        html {
            font-size: 14px;
        }
    }

    @media (min-width: 380px) {
        html {
            font-size: 15px;
        }
    }

    @media (min-width: 400px) {
        html {
            font-size: 15px;
        }
    }

    @media (min-width: 420px) {
        html {
            font-size: 16px;
        }
    }

    .titleName img {
        max-width: 100%;
        max-height: 100%;
    }

    .appointment {
        padding-top: 1rem;
        font-size: 1.5em;
        color: #fff;
        line-height: 2em;
        text-indent: 1rem;
    }

    .appointment-describe {
        font-size: 1em;
        color: #fff;
        text-indent: 1.2rem;
    }

    .info {
        margin: 1rem;
        background-color: #f2f2f2;
        border-radius: 3px;
        height: 5rem;
        display: flex;
        justify-content: center;
        flex-direction: row;
    }

    .allNum {
        text-align: center;
    }

    .surplusNum {
        text-align: center;
    }

    .allNum-num {
        margin-top: 1rem;
        line-height: 2rem;
        font-size: 2em;
        color: #1E9FFF;
    }

    .allNum-info {
        font-size: 1em;
        color: #666;
    }

    .nannv {
        height: 6rem;
        width: 100%;
        background: url(/assets/img/nannv.png) right bottom no-repeat
    }

    .weui-input {
        width: 100%;
        border: 1px solid #e5e5e5;
        outline: 0;
        -webkit-appearance: none;
        background-color: transparent;
        font-size: inherit;
        color: inherit;
        height: 2em;
        line-height: 2em;
    }

    .weui-btn_success {
        background-image: linear-gradient(#35a3a0, #4fae8e);
    }
     #js_cell_yes_date{
        dispaly:flex;
        flex-direction:column;
        text-align:center;
        line-height:40px;
    }
    #js_cell_yes_leave{
        dispaly:flex;
        flex-direction:column;
        text-align:center;
        line-height:70px;
    }
    .weui-input{
        height:2.2rem;
    }
</style>
<form name="form1" id="form1" role="form" data-toggle="validator" method="POST" action="">

    <div class="page">

        <div class="page__bd">
            <div class="weui-cells weui-cells_form" style="margin-top:0px;font-size:14px;">
                <div class="my-weui-cell">
                   <img src="__CDN__/assets/img/nydx.png" />
                </div>
                <div class="my-weui-cell">
                    <div style=" width:100%;background-image: linear-gradient(#35a3a0, #4fae8e)">
                        <div class="nannv" style="width: 100%;">
                            <p class="appointment">疫情期间</p>
                            <p class="appointment-describe">图书馆预约登记</p>
                        </div>
                    </div>
                </div>

                <div class="info">
                    <div class="allNum" style="width: 50%;">
                        <p class="allNum-num">{$row['reserve_number']}</p>
                        <p class="allNum-info">总位置</p>
                    </div>
                    <div class="surplusNum" style="width:49%;">
                        <p class="allNum-num" style="color: #FF5722;">{$row['reserved_number']}</p>
                        <p class="allNum-info">剩余位置</p>
                    </div>
                </div>

                <div class="weui-cell weui-cell_active" id="js_cell"
                    style="margin-left: 1rem;margin-right: 1rem; padding-left:0px;padding-right:0px; dispaly:flex; flex-direction:column;">
                    <div class="weui-cell__bd weui-flex" style="width:100%;margin-bottom:15px;">
                        <input name="yname" class="weui-input" autofocus="" type="text" placeholder="姓名"
                            style="text-indent: 0.5rem;" />
                    </div>
                    <div class="weui-cell__bd weui-flex" style="width:100%;margin-bottom:15px;">
                        <input name="ynum" class="weui-input" autofocus="" type="text" placeholder="学号"
                            style="text-indent: 0.5rem;" />
                    </div>
                </div>

                <div class="weui-cell weui-cell_active" id="js_cell_yes"
                    style="margin-left: 1rem;margin-right: 1rem; padding-left:0px;padding-right:0px; dispaly:none">
                    <div class="weui-cell__bd weui-flex" id="js_cell_yes_leave">
                        
                    </div>
                </div>

            </div>
            <div id="book_button" style="margin-top: 15px;">
                <span id="formSubmitBtn" type="submit" class="weui-btn weui-btn_success">登记离开</span>
            </div>
        </div>
    </div>
</form>

<script>
    // 设置rem大小
    function fontSize() {
        var deviceWidth = document.documentElement.clientWidth > 768 ? 768 : document.documentElement.clientWidth;
        document.documentElement.style.fontSize = (deviceWidth / 25) + "px";
    }
    fontSize();
    window.onresize = fontSize;
   
    // 登记预约方法
    document.getElementById('formSubmitBtn').onclick = function () {
        var name = $("input[name='yname']").val();
        if (name == '') {
            $.alert("请输入姓名！");
            return false;
        }
        var num = $("input[name='ynum']").val();
        if (num == '') {
            $.alert("请输入学号！");
            return false;
        }
       
        $.ajax({
            data: { username: name, sid: num },
            url: "{:url('index/book/leave')}",
            type: "post",
            success: function (res) {
                if (res.code == 1) {
                    $.alert(res.msg, function () {
                        window.localStorage.book_username = '';
                        window.localStorage.book_usernum = '';
                        $("#js_cell").hide();
                        $("#js_cell_yes").show();
                        $("#js_cell_yes_leave").html("<p style='font-size:18px;'>登记离开成功!<p>");
                        $("#book_button").hide();
                    });
                } else {
                    $.alert(res.msg);
                }
            }
        })
    }
</script>